<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器-与其相关的方法is和eq和slice和contents和filter</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // alert($('.red').is('li'));//true  一组class=red的元素里是否有li 如果有 返回true 如果没返回false
            // alert($('.red').is($('li').get(0)));//false  一组class=red的元素里是否有li 如果有 返回true 如果没返回false
            // alert($('.red').is($('li').get(2)));//true  一组class=red的元素里是否有li 如果有 返回true 如果没返回false

            // alert($('li').eq(2).hasClass('red'));//所有的li里索引为2的calss属性里是否有red
            // $('li').slice(2,4).css('background','red');//索引从2开始到4结束 不包含索引4，

            // alert($('div').children().size());//返回1 一个标签strong  获取某元素下的所有的标签节点
            // alert($('div').contents().size());//返回3 1个标签 2个文本节点 共3个  获取某元素下的所有的节点 包括文本节点
            // $('li').filter('.red').css('background','red');//选取一组元素li 读取class=red的元素
            // $('li').filter('.red,:first-child').css('background','red');//选取一组元素li 读取class=red的元素
            $('li').filter(function () {
                return $(this).attr('class')=='red'&&$(this).attr('title')=='red';
            }).css('background','red');//选取一组元素li 读取class=red且title=red的元素
        });
    </script>
</head>
<body>
    <script>
        /*常用方法 结合选择器和过滤器的一些方法
         *
        *       1.$('.red').is('li') 一组class=red的元素里是否有li 如果有 返回true 如果没返回false
        *       2.$('li').eq(2).hasClass(red) 其实就是is("."+class) 是否包含这样的class red前面不需要点.
        *       3.$('li').slice(0,2) 选择start到end位置的元素 不包含end
        *       4.$('div').contents() 获取某元素下的所有的节点 包括文本节点
        *       5.$('li').filter('.red') 匹配元素的子集构造一个新的jquery对象
        *       6.$('li').filter(function(){....})
        *       filte过滤的意思
        */
    </script>
    <ul>
        <li>元素</li>
        <li>元素</li>
        <li class="red" title="red">元素</li>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
        <li class="red">元素</li>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
        <li>元素</li>
        <li class="red">元素</li>
        <li>元素</li>
        <li>元素</li>
    </ul>
<div>
    A
    <strong></strong>
    C
</div>
</body>
</html>